/* 首页样式 */

* {
    /* 鼠标经过变成小手 */
    cursor: pointer;
    /* 全局页面变灰白样式 */
    /* -webkit-filter: grayscale(90%);
    filter: grayscale(90%); */
}

/* html变灰白样式 */
/* html {
    -webkit-filter: grayscale(90%);
    filter: grayscale(90%);
} */

.main {
    width: 980px;
    height: 455px;
    margin-left: 219px;
    /* background-color: pink; */
    margin-top: 10px;
}

/* 首页中间部分 */
.focus {
    /* 相对定位 */
    position: relative;
    width: 720px;
    height: 455px;
    background-color: purple;
}

/* 轮播图左右按钮样式 */
.arroe-l,
.arroe-r {
    /* 浮动的元素和绝对定位的元素可以直接给大小 */
    /* 子绝父相 */
    position: absolute;
    /* 居中定位法高度一半向上走自身高度一半 */
    top: 50%;
    margin-top: -20px;
    width: 24px;
    height: 40px;
    /* 半透明写法 */
    background: rgba(0, 0, 0, .3);
    text-align: center;
    /* 垂直居中  与高度一样像素*/
    line-height: 40px;
    color: #fff;
    font-family: 'icomoon';
}

/* 右三角样式 */
.arroe-r {
    right: 0;
    font-family: 'icomoon';
}

/* 焦点图样式 */
.circle {
    position: absolute;
    bottom: 10px;
    left: 50px;
}

.circle li {
    width: 8px;
    height: 8px;
    /* background-color: #fff; */
    /* 半透明效果 */
    border: 2px solid rgba(255, 255, 255, 0.5);
    float: left;
    margin: 0 3px;
    /* 小圆圈样式设计 */
    border-radius: 50%;
}

/* 圆圈选中变失心样式 */
.current {
    background-color: #fff;
    box-shadow: inset
}

/* 新闻快报样式 */
.newsflash {
    width: 250px;
    height: 455px;
    /* background-color: skyblue; */
}

/* 版心 */
.news {
    height: 163px;
    border: 1px solid #ccc;
    /* background-color: purple; */
}

/* 新闻快报头部 */
.news-hd {
    height: 32px;
    /* dotted 点线 dashed 虚线 */
    border-bottom: 1px dotted #ccc;
    font-size: 14px;
    /* 垂直居中 行高与盒子高一致 */
    line-height: 32px;
    padding: 0 15px;
}

.news-hd a {
    float: right;
    font-family: 'icomoon';
    font-size: 12px;
}

/* 新闻快报身体 */
.news-bd {
    padding: 10px 0 0 15px;
}

.news-bd li {
    height: 23px;
}


/* 首页右侧第二部分 */
.lifeservice {
    /* 隐藏超出的部分 */
    overflow: hidden;
    height: 208px;
    border: 1px solid #ccc;
    /* background-color: black; */
    /* 与上一个标签无间隔 */
    margin-top: none;
}

/* 子盒子  子盒子可以大于父盒子（lifeservice）*/
.lifeservice ul {
    width: 252px;
}

.lifeservice li {
    /* 子绝父相 */
    position: relative;
    float: left;
    width: 62px;
    height: 70px;
    /* 右边框 */
    border-right: 1px solid #ccc;
    /* 底边框 */
    border-bottom: 1px solid #ccc;
}

/* 12个盒子样式 */
.lifeservice li a {
    display: block;
    /* 解决 i 引起的 外边距塌陷合并的问题 */
    overflow: hidden;
    height: 100%;
}

.lifeservice li p {
    text-align: center;
}

/* 子绝父相  减字图片样式 */
.hot {
    position: absolute;
    width: 20px;
    height: 20px;
    right: 0;
    top: 0;
    background: url(/img/jianzi3.jpeg) no-repeat;
}

/* 话费盒子样式 */
.sevice-ico {
    display: block;
    width: 24px;
    height: 24px;
    background: url(../img/icons.png);
    margin: 10px auto;
}

/* 单飞icon */
.sevice-ico-danfei {
    background-position: -26px -23px;
}

/* 电影icon */
.sevice-ico-dianyin {
    width: 26px;
    background-position: -82.5px -23px;
}

/* 游戏icon */
.sevice-ico-youxi {
    width: 26px;
    background-position: -143px -21px;
}

/* 双飞icon */
.sevice-ico-shuangfei {
    width: 26px;
    background-position: -26px -23px;
}

/* 单加油icon */
.sevice-ico-jiayou {
    width: 26px;
    background-position: -24px -103px;
}

/* 酒店icon */
.sevice-ico-jiudian {
    width: 26px;
    background-position: -83px -103px;
}

/* 通行icon */
.sevice-ico-tongxing {
    width: 26px;
    background-position: -143px -102px;
}

/* 优惠加油站icon */
.sevice-ico-youhuijyz {
    width: 26px;
    background-position: -24px -101px;
}

/* 财富icon */
.sevice-ico-caifu {
    width: 26px;
    background-position: -25px -183px;
}

/* 银行卡icon */
.sevice-ico-yinhangka {
    width: 26px;
    background-position: -83px -180px;
}

/* 白嫖icon */
.sevice-ico-baibiao {
    width: 26px;
    background-position: -143px -185px;
}

/* 双财富icon */
.sevice-ico-shuangcf {
    width: 26px;
    background-position: -25px -183px;
}

.bargain {
    height: 75px;
    /* 与上一个标签无间隔 */
    margin-top: 5px;
}

/* 推荐模块样式 */
.recomend {
    height: 163px;
    /* background-color: pink; */
    margin-top: 10px;
}

/* 推荐模块左模块 */
.recom-hd {
    width: 200px;
    height: 163px;
    /* background-color: #5c5251; */
    /* background-color: gray; */
    text-align: center;
}

.recom-hd img {
    margin: 0 0px 20px 0;
}

.recom-hd h3 {
    margin-top: -75px;
    font-size: 18px;
    color: #fff;
    /* 字体没有加粗效果 */
    font-weight: normal;
}

/* 推荐模块右模块 */
.recom-bd {
    width: 1000px;
    height: 163px;
    background-color: #ebebeb34;
}

.recom-bd li {
    float: left;
    width: 249px;
    height: 145px;
    border-right: 1px solid #ccc;
    margin-top: 10px;
}

.recom-bd .last {
    border-right: 0;
}

/* .fioor 楼层区 */
.box-hd {
    height: 30px;
    /* background-color: pink; */
    border-bottom: 2px solid #c81623;
    margin-top: 25px;
}

/* 楼层区，文字样式 */
.box-hd h3 {
    float: left;
    color: #c81623;
    font-size: 18px;
}

.tab-list {
    line-height: 30px;
}

.tab-list li {
    float: left;
    /* color: rgba(0, 0, 0, 0.445); */
}

.tab-list li a {
    margin: 0 9px;
    /* color: rgba(0, 0, 0, 0.781); */
    color: #000;
}

/* 伪元素创建，使其鼠标放在上面使其背景颜色变红 */
.tab-list li a:hover {
    background-color: red;
    color: #fff;
}

/* floor楼层区域图片的样式 */
.box-bd {
    height: 361px;
    /* background-color: pink; */
}

.w209 {
    width: 209px;
    background-color: #f9f9f9;
}

.w329 {
    width: 329px;
}

.w219 {
    width: 219px;
    border-right: 1px solid #ccc;
}

.w219:hover {
    border-right: 1px solid #000;
}

.w220 {
    width: 220px;
    border-right: 1px solid #ccc;
}

.tab-con li {
    height: 360px;
    float: left;
}

.tab-con-item {
    border-bottom: 1px solid #ccc;
}

.tab-con-list {
    overflow: hidden;
    margin-bottom: 15px;
}

.tab-con-list li {
    width: 86px;
    height: 32px;
    line-height: 32px;
    border-bottom: 1px solid #ccc;
    margin-left: 10px;
    text-align: center;
}

/* 固定电梯导航 */
.fixedtool {
    /* 绝对定位 */
    position: fixed;
    top: 100px;
    left: 50%;
    margin-left: -676px;
    width: 66px;
}

.fixedtool li {
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 12px;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    color: #000;
}

.fixedtool .current {
    color: #c81623;
}

.fixedtool li:hover{
    background-color: #c81623;
    color: #ccc;
}